<template>
  <div>
    <a-modal v-model="visible" centered :title="false" :footer="null" width="600px" @cancel="close" :destroyOnClose="true">
      <div style="min-height: 500px">
        <div style="margin-bottom: 16px">{{ name }}</div>
        <a-carousel arrows dots-class="slick-dots slick-thumb" ref="varousel">
          <div slot="prevArrow" class="custom-slick-arrow" style="left: 25px">
            <a-icon type="left-circle" />
          </div>
          <div slot="nextArrow" class="custom-slick-arrow" style="right: 25px">
            <a-icon type="right-circle" />
          </div>
          <a slot="customPaging" slot-scope="props">
            <img :src="getImgUrl(props.i)" class="dots-imgs" />
          </a>
          <div v-for="(item, index) in productList" :key="index" class="carousel-imgs">
            <img v-if="item.imgUrl" :src="item.imgUrl" />
            <video v-else :src="item.videoUrl" controls></video>
          </div>
        </a-carousel>
      </div>
    </a-modal>
  </div>
</template>
<script>
export default {
  data() {
    return {
      visible: false,
      loading: false,
      name: '',
      productList: []
    }
  },
  methods: {
    show(record) {
      console.log(record, 'record')
      this.name = record.content
      // this.productList = record.imgUrls
      this.productList = record.imgUrls.map(item => {
        return Object.assign(
          {},
          {
            imgUrl: item
          }
        )
      })
      if (JSON.stringify(record.videoDetail)) {
        if (record.videoDetail.videoUrl) {
          this.productList.push({
            coverUrl: record.videoDetail.coverUrl,
            videoUrl: record.videoDetail.videoUrl
          })
        }
      }
      this.visible = true
    },
    close() {},
    // 查看大图
    getImgUrl(i) {
      if (this.productList[i].coverUrl) {
        return this.productList[i].coverUrl
      } else {
        return this.productList[i].imgUrl
      }
      // return this.productList[i]
    }
  }
}
</script>
<style lang="less" scoped>
.ant-pro-pages-list-projects-cardList {
  width: 140px;
  height: 200px !important;
}
/deep/ .ant-spin-container .ant-row {
  display: flex !important;
}
/deep/ .ant-spin-container .ant-row .ant-col {
  margin-right: 10px;
}
/deep/ .ant-pro-pages-list-projects-cardList .ant-pro-pages-list-projects-card {
  height: 200px !important;
  width: 140px !important;
}
.edit-foot {
  padding: 12px;
  p {
    color: #8c8c8c;
    margin-bottom: 5px;
  }
  p:first-child {
    color: #262626;
    font-size: 16px;
  }
  p:last-child {
    color: #cdcdcd;
    font-size: 12px;
  }
}
.ant-carousel {
  .carousel-imgs {
    height: 60vh;
    overflow: hidden;
    img,
    video {
      height: 90%;
      width: 100%;
      object-fit: scale-down;
      margin: 0 auto;
    }
  }
  .dots-imgs {
    width: 50px;
    height: 50px;
    border: 1px solid #cdcdcd;
    padding: 5px;
    object-fit: scale-down;
  }
  .slick-next::before {
    content: '';
  }
  .slick-prev::before {
    content: '';
  }
  .custom-slick-arrow {
    width: 25px;
    height: 25px;
    font-size: 25px;
    color: rgb(116, 116, 116);
    background-color: transparent;
    opacity: 1;
    z-index: 2;
  }
  /deep/ .slick-dots-bottom {
    bottom: 30px;
    li {
      margin: 0 5px;
    }
  }
}
</style>

